import './App.css';
import React from 'react';
import LineCharts from './components/lineCharts';
import ReactLineCharts from './components/reactCharts';
import PublicCharts from './components/publicCharts';
function App() {
  const data = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#fff",
        align: "left",
        fontSize: 14,
      },
      backgroundColor: "rgba(0,0,0,0.8)",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      },
      {
        data: [900, 700, 800, 900, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };
  return (
    <div className="App">
      echarts图形可视化
      <div style={{ width: 600, height: 400, background: "pink", margin: "20px auto" }}>
        <LineCharts />
      </div>
      <div style={{ width: 600, height: 400, margin: "20px auto" }}>
        <ReactLineCharts options={data} />
      </div>
      <div style={{ width: 600, height: 400, margin: "20px auto" }}>
        <PublicCharts optionData={data} />
      </div>
    </div>
  );
}

export default App;
